<template>
	<div class="container">
		<SearchForm
			@reset="reset"
			@search="search"
			ref="search"
			labelWidth="100px">
			<el-form-item label="业务类型:">
				<el-select
					v-model="queryParams.earnType"
					placeholder="请选择业务类型"
					clearable>
					<el-option
						v-for="item in dict.type.finance_proceeds_type"
						:key="item.value"
						:label="item.label"
						:value="item.label"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="凭证类型:">
				<el-select
					v-model="queryParams.pushType"
					placeholder="请选择凭证类型"
					clearable>
					<el-option
						v-for="item in pushTypeList"
						:key="item.value"
						:label="item.label"
						:value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="业务单号:">
				<el-input
					clearable
					v-model="queryParams.earnCode"
					placeholder="请输入业务单号"></el-input>
			</el-form-item>
			<el-form-item label="所属公司:">
				<el-select
					v-model="queryParams.carAppertainCompany"
					placeholder="请选择公司"
					filterable
					clearable>
					<el-option
						v-for="item in companyList"
						:key="item.deptId"
						:label="item.deptName"
						:value="item.deptId"></el-option>
				</el-select>
			</el-form-item>
		</SearchForm>

		<div class="card-wrap card-padding card-margin" v-loading="loading">
			<div class="table-title-wrap justify-end">
				<el-button
					type=""
					icon="el-icon-delete-solid"
					size="mini"
					v-hasPermi="[
						'finance:manage:NCRecord:list:removeErrorData',
					]"
					@click="removeErrorData">
					删除失败记录
				</el-button>
				<el-button
					type=""
					icon="el-icon-upload2"
					size="mini"
					v-hasPermi="['finance:manage:NCRecord:list:export']"
					@click="exportFile">
					导出
				</el-button>
			</div>
			<div class="tableBox">
				<table-page
					:loading="loading"
					:dataList="dataList"
					:total="total"
					:page.sync="queryParams.pageNum"
					:limit.sync="queryParams.pageSize"
					:border="true"
					@setSizeCurrent="getList">
					<!-- 操作插槽 -->
					<template slot="tableColAc">
						<el-table-column
							label="业务单号"
							align="center"
							width="210">
							<template slot-scope="scope">
								{{ scope.row.earnCode || '-' }}
							</template>
						</el-table-column>
						<el-table-column label="所属公司" align="center">
							<template slot-scope="scope">
								{{ scope.row.carAppertainCompany || '-' }}
							</template>
						</el-table-column>
						<el-table-column label="POST" align="center">
							<template slot-scope="scope">
								{{ scope.row.carRunCity || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							label="业务类型"
							align="center"
							min-width="100px">
							<template slot-scope="scope">
								{{ scope.row.earnType }}
							</template>
						</el-table-column>
						<el-table-column label="凭证号" align="center">
							<template slot-scope="scope">
								{{ scope.row.voucherNum || '-' }}
							</template>
						</el-table-column>
						<el-table-column label="凭证类型" align="center">
							<template slot-scope="scope">
								{{ scope.row.pushType || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							label="推送时间"
							align="center"
							width="150px">
							<template slot-scope="scope">
								{{ scope.row.pushDate || '-' }}
							</template>
						</el-table-column>
						<el-table-column label="推送状态" align="center">
							<template slot-scope="scope">
								{{ scope.row.pushState || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							label="失败原因"
							align="center"
							show-overflow-tooltip>
							<template slot-scope="scope">
								{{ scope.row.reasonForFailure || '-' }}
							</template>
						</el-table-column>
					</template>
				</table-page>
			</div>
		</div>
	</div>
</template>

<script>
	import * as app from '@/api/app.js';
	import {
		List,
		ExportFile,
		RemoveError,
	} from '@/api/finance/manage/NCRecord/api.js';
	export default {
		name: 'NCRecord',
		data() {
			return {
				total: 0,
				loading: false,
				queryParams: {
					applyUserName: '',
					pageNum: 1,
					pageSize: 10,
				},
				dataList: [],
				earnTypeList: [],
				pushTypeList: [
					{
						key: '收款凭证',
						value: '收款凭证',
					},
					{
						key: '应收凭证',
						value: '应收凭证',
					},
					{
						key: '摊销凭证',
						value: '摊销凭证',
					},
				],
				companyList: [],
			};
		},
		dicts: ['finance_proceeds_type'],
		created() {
			this.getList();
			this.getDeptList(2);
		},
		methods: {
			getDeptList(deptType) {
				let params = {
					deptType,
				};
				app.DeptListNoPermission(params).then(res => {
					if (res.code == 200) {
						res?.data?.map(item => {
							item.deptId = item.deptId;
						});
						switch (deptType) {
							case 2:
								this.companyList = res?.data ?? [];
								break;
						}
					}
				});
			},
			search() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			reset() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
				};
				this.getList();
			},
			removeErrorData() {
				this.$confirm('此操作将删除失败记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				})
					.then(() => {
						RemoveError().then(res => {
							if (res.code == 200) {
								this.getList();
							}
						});
					})
					.catch(() => {});
			},
			getList() {
				this.loading = true;
				List(this.queryParams)
					.then(res => {
						if (res.code == 200) {
							this.dataList = res.rows;
							this.total = res.total;
						}
					})
					.catch(() => {})
					.finally(() => {
						this.loading = false;
					});
			},
			exportFile() {
				let params = this._.cloneDeep(this.queryParams);
				this.download(
					ExportFile,
					params,
					`应收账款_${new Date().getTime()}.xlsx`,
				);
			},
		},
	};
</script>

<style scoped lang="scss">
	.container {
		margin: 15px;
		box-sizing: border-box;
	}

	.tableBox {
		background-color: #fff;
		padding-bottom: 20px;
	}
	.card-margin {
		margin-top: 15px;
	}
	.searchbtns {
		padding: 20px 15px;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
	}
	::v-deep .el-form-item {
		.el-form-item__label {
			white-space: nowrap;
		}
	}
</style>
